<template>
  <view class="invoice-history">
    <view class="input-item">
      <view class="tit"> 手机号 </view>
      <input
        type="text"
        maxlength="11"
        v-model="user.phone"
        placeholder="请输入手机号"
        style="width: 50%; font-size: 28upx"
        placeholder-style="font-size:28upx;"
      />
      <button
        class="sms-code-btn"
        :disabled="smsCodeBtnDisabled"
        @tap.stop="getSmsCode"
      >
        <text v-if="!smsCodeBtnDisabled">|&nbsp;&nbsp;获取验证码</text>
        <text v-else class="sms-code-resend">{{
          `重新发送 (${codeSeconds})`
        }}</text>
      </button>
      <!-- <view class="send-code" @tap="getCode"> |&nbsp;&nbsp;获取验证码 </view> -->
    </view>
    <view class="input-item">
      <view class="tit"> 验证码 </view>
      <input
        type="text"
        maxlength="11"
        v-model="user.code"
        style="width: 40%"
        placeholder="请输入验证码"
        placeholder-style="font-size:28upx;"
      />
    </view>
    <view class="btn-wrapper">
      <button class="add-btn" @tap="confirm">确定</button>
    </view>
  </view>
</template>

<script>
import moment from "@/common/moment";
import { smsCode,phoneBind } from "@/api/login";
export default {
  components: {},
  data() {
    return {
      loading: false,
      user: {
        code: "",
        phone: "",
      },
      reqBody: {},
      codeSeconds: 0, // 验证码发送时间间隔
      smsCodeBtnDisabled: true,
    };
  },
  onLoad(options) {
    const time =
      moment().valueOf() / 1000 - uni.getStorageSync("registerSmsCodeTime");
    if (time < 60) {
      this.codeSeconds =
        this.$mConstDataConfig.sendCodeTime - parseInt(time, 10);
      this.handleSmsCodeTime(this.codeSeconds);
    } else {
      this.codeSeconds = this.$mConstDataConfig.sendCodeTime;
      this.smsCodeBtnDisabled = false;
      uni.removeStorageSync("registerSmsCodeTime");
    }
    const backUrl = uni.getStorageSync("backToPage");
    // if (backUrl.indexOf("promo_code") !== -1) {
    //   this.registerParams.promoCode = JSON.parse(backUrl)["query"][
    //     "promo_code"
    //   ];
    // } else {
    //   this.registerParams.promoCode = options.promo_code;
    // }
  },
  methods: {
    // 获取手机验证码
    getSmsCode() {
      this.reqBody["phone"] = this.user["phone"];
      let checkSendCode = this.$mGraceChecker.check(
        this.reqBody,
        this.$mFormRule.sendCodeRule
      );
      if (!checkSendCode) {
        this.$mHelper.toast(this.$mGraceChecker.error);
        return;
      }
      this.$http
        .post(smsCode, {
          phone: this.user.phone,
          type:"1"
        })
        .then((r) => {
          if (r.data) {
            this.$mHelper.toast(`验证码发送成功, 验证码是${r.data}`);
          } else {
            this.$mHelper.toast("验证码已发送.");
          }
          this.smsCodeBtnDisabled = true;
          uni.setStorageSync("registerSmsCodeTime", moment().valueOf() / 1000);
          this.handleSmsCodeTime(59);
        });
    },
    // 数据初始化
    initData() {
      this.loading = false;
    },
     handleSmsCodeTime(time) {
      let timer = setInterval(() => {
        if (time === 0) {
          clearInterval(timer);
          this.smsCodeBtnDisabled = false;
        } else {
          this.codeSeconds = time;
          this.smsCodeBtnDisabled = true;
          time--;
        }
      }, 1000);
    },
    confirm() {
      this.reqBody["phone"] = this.user["phone"];
      this.reqBody["code"] = this.user["code"];
      let checkSendCode = this.$mGraceChecker.check(
        this.reqBody,
        this.$mFormRule.loginByCodeRule
      );
      if (!checkSendCode) {
        this.$mHelper.toast(this.$mGraceChecker.error);
        return;
      }
      this.$http.put(phoneBind, {
          phone: this.user.phone,
          type:"1",
          code: Number(this.user.code)
        })
        .then((r) => {
          if (r.data) {
            this.$mHelper.toast("绑定成功.");
            this.$mRouter.push({ route: "/pages/user/userinfo/userinfo" });
          }
        });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #fff;
}
.invoice-history {
  border-top: 1upx solid #eeeeee;
  .input-item {
    margin: 0 30upx;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100upx;
    line-height: 100upx;
    border-bottom: 1upx solid #eeeeee;
    .sms-code-btn {
      position: absolute;
      color: #326130;
      right: -30upx;
      font-weight: 500;
      bottom: 0;
      font-size: 28upx;
    }

    .sms-code-resend {
      color: #999;
    }

    .sms-code-btn:after {
      border: none;
      background-color: transparent;
    }
    .send-code {
      width: 30%;
    }
    .tit {
      font-size: 28upx;
      width: 156upx;
      font-family: PingFang SC;
      font-weight: 400;
    }
    .send-code {
      font-size: 28upx;
      font-weight: 400;
      color: #326130;
    }
  }
}
.add-btn {
  background: #f91c1c;
  border-radius: 40upx;
  font-size: 30upx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #fff;
  font-size: 30upx;
  font-weight: 500;
}
.btn-wrapper {
  padding: 127upx 30upx 0 30upx;
}
</style>
